<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>查看商品-azhuo商城</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Cache-Control" content="no-siteapp" />

	<link rel="shortcut icon" href="${pageContext.request.contextPath }/image/logo/xyz.ico" type="image/x-icon" />
	<link rel="stylesheet" href="${pageContext.request.contextPath }/css/font.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/css/xadmin.css">

	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath }/lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/xadmin.js"></script>

</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb">
			<a href="${pageContext.request.contextPath}/adminjsps/home.jsp" target="iframe_a">首页</a>
			<a><cite>查看商品</cite></a>
		</span>
		<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
			href="javascript:location.replace(location.href);" title="刷新">
			<i class="layui-icon" style="line-height:30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<div class="layui-row">
			<%-- 进行商品条件查询 --%>
			<form class="layui-form layui-col-md12 x-so layui-form-pane" method="post"
				action="${pageContext.request.contextPath }/admin/AdminGoodsServlet">
				<input type="hidden" name="method" value="findGoods" />
				<input class="layui-input" placeholder="请输入商品名称" name="gname" />
				<select name="cname" id="category">
					<option>请选择分类名称</option>
				</select>
				<button class="layui-btn" lay-submit="" lay-filter="sreach">搜索商品</button>
			</form>
		</div>
		<xblock style="height:40px;">
			<%-- 
			<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon"></i>批量删除
			</button>--%>
			<span class="x-right" style="line-height:40px">共有商品：<span id="goodsCount">${fn:length(goodsList)
					}</span>件</span>
		</xblock>
		<table class="layui-table layui-form" style="text-align: center;">
			<thead>
				<tr style="text-align: center;">
					<%-- <th width="20">
						<div class="layui-unselect header layui-form-checkbox" lay-skin="primary" style="text-align: center;">
							<i class="layui-icon">&#xe605;</i>
						</div>
					</th> --%>
					<th style="text-align: center;">序号</th>
					<th style="width:100px;text-align: center;">商品图片</th>
					<th style="text-align: center;">商品名称</th>
					<th style="width:80px;text-align: center;">商品价格</th>
					<th style="text-align: center;">所属分类</th>
					<th style="text-align: center;">商品参数</th>
					<th style="text-align: center;">商品描述</th>
					<th style="width:130px;text-align: center;">操作</th>
			</thead>
			<tbody class="x-cate">
				<%-- 输出所有分类 --%>
				<c:forEach items="${goodsList }" var="goods" varStatus="status">
					<tr cate-id='1' fid='0'>
						<%-- <td>
							<div class="layui-unselect layui-form-checkbox" lay-skin="primary"
								data-id='${category.cname }'>
								<i class="layui-icon">&#xe605;</i>
							</div>
						</td> --%>
						<td>${status.count }</td>
						<td>
							<img style="width: 70px;height: 70px;padding: 5px;"
								src="${pageContext.request.contextPath}/image/goods/${goods.image}" alt="商品图片" />
						</td>
						<td>${goods.gname }</td>
						<td>${goods.price }元</td>
						<td>${goods.category.cname }</td>
						<td>${goods.parameter }</td>
						<td>${goods.desc }</td>
						<td class="td-manage">
							<button class="layui-btn layui-btn layui-btn-xs"
								onclick="x_admin_show('修改商品','${pageContext.request.contextPath}/admin/AdminGoodsServlet?method=loadGoods&gid=${goods.gid }')">
								<i class="layui-icon">&#xe642;</i>编辑
							</button>
							<button class="layui-btn-danger layui-btn layui-btn-xs"
								onclick="member_del(this,'${goods.gid }')" href="javascript:;">
								<i class="layui-icon">&#xe640;</i>删除
							</button>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	<script>
		$(document).ready(function () {
			// 加载分类
			loadCategory();

			layui.use(['form'], function () {
				form = layui.form;

			});

		});

		// 使用ajax从数据库加载分类
		function loadCategory() {
			$.ajax({
				type: "POST",// 请求的方式默认为get 改为Post
				url: "${pageContext.request.contextPath}/admin/AdminCategoryServlet",// 往服务器端请求的地址 写成绝对路径
				data: {
					method: "loadCategory"
				},// 往服务器端发送的数据
				// 接受服务器端数据函数 回调函数
				success: function (data) {
					// data是服务器返回的数据
					console.log("data =" + data);
					if (data) {
						addCategoryInSelect(data);
					}
				}
			});
		}

		// 把json字符串中的数据添加到select选项中
		function addCategoryInSelect(jsonData) {
			var jsonArr = eval(jsonData);

			$.each(jsonArr, function (key, value) {

				var option = '<option value="' + value.cid + '">' + value.cname + '</option>';
				console.log("option = " + option);
				$("#category").append(option);
			});
		}


		// 单条删除
		function member_del(obj, id) {
			layer.confirm('确认要删除吗？', function (index) {

				//发异步删除数据
				$.ajax({
					type: "POST",// 请求的方式默认为get 改为Post
					url: "${pageContext.request.contextPath}/admin/AdminGoodsServlet",// 往服务器端请求的地址 写成绝对路径
					data: {
						method: "removeGoods",
						gid: id
					},// 往服务器端发送的数据
					// 接受服务器端数据函数 回调函数
					success: function (data) {
						// data是服务器返回的数据
						if (data && data != "null") {
							console.log(data);
							$(obj).parents("tr").remove();
							layer.msg('已删除!', { icon: 1, time: 1000 });

							// 更新显示的记录数
							var goodsCount = parseInt($("#goodsCount").text());
							console.log("goodsCount = " + goodsCount);

							goodsCount--;
							$("#goodsCount").text(goodsCount);

						} else {
							layer.msg('未删除，服务器忙!', { icon: 1, time: 1000 });
						}
					}
				});
			});
		}

	</script>
</body>

</html>